<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>数据大屏</title>
		<script type="text/javascript" src="https://gudian-gddl.oss-cn-beijing.aliyuncs.com/layui/jquery.js"></script>
		<script type="text/javascript" src="https://gudian-gddl.oss-cn-beijing.aliyuncs.com/layui/layui.all.js"></script>
		<!-- <script type="text/javascript" src="https://gudian-gddl.oss-cn-beijing.aliyuncs.com/layui/layui.js"></script> -->
		<link rel="stylesheet" type="text/css" href="https://gudian-gddl.oss-cn-beijing.aliyuncs.com/layui/css/layui.css" />
		<script type="text/javascript" src="https://gudian-gddl.oss-cn-beijing.aliyuncs.com/layui/echarts.min.js"></script>
		<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=tQAk8cBCGKz24ekGp5Tk9Q8QUVlMA4VB"></script>
		<style>
			*{
				color: #0087FF;
				/* background-color: transparent; */
				font-size: 15px;
				font-family: Alibaba PuHuiTi;
			}
			body{
			  font-family: "华文细黑";
			  background:url("https://gudian-gddl.oss-cn-beijing.aliyuncs.com/backgroud.png") no-repeat;
			  background-size: 100%;
			}
			.layui-col-space15>* {
			    padding-top: 50px;
			}
			.layui-card{
				background-color: transparent;
			}
			.layui-table td, .layui-table th, .layui-table-col-set, .layui-table-fixed-r, .layui-table-grid-down, .layui-table-header, .layui-table-page, .layui-table-tips-main, .layui-table-tool, .layui-table-total, .layui-table-view, .layui-table[lay-skin=line], .layui-table[lay-skin=row] {
			    border-width: 1px;
			    /* border-style: solid; */
				border-style: none;
			    border-color: #e6e6e6;
			}
			.layui-input, .layui-select, .layui-textarea {
			    height: 38px;
			    line-height: 1.3;
			    line-height: 38px\9;
			    border-width: 1px;
				/* border-style: solid; */
			    border-style: none;
			    background-color: #fff;
			    border-radius: 2px;
			}
			.layui-input::placeholder .layui-unselect::placeholder{
			    color: #0087FF;
			}
			.layui-table tbody tr:hover, .layui-table thead tr, .layui-table-click, .layui-table-header, .layui-table-hover, .layui-table-mend, .layui-table-patch, .layui-table-tool, .layui-table-total, .layui-table-total tr, .layui-table[lay-even] tr:nth-child(even) {
			    /* background-color: #f2f2f2; */
				background-color: transparent;
			}
			.layui-table thead tr{
			    /* background-color: #f2f2f2; */
				background-color: transparent;
			}
			/* select::placeholder{
				color: #0087FF;
			} */
			input {
				background-color: transparent;
			}
			select {
				background-color: transparent;
			}
			input::-webkit-input-placeholder {
				color: #0087FF;
			}
			.layui-form-select .layui-edge {
			    color: #0087FF!important;
			}
			tr{
				background-color: transparent;
			}
			.layui-input,.layui-unselect{
				background-color: transparent;
			}
			.layui-table {
			    background-color: transparent;
			}

			.box1{
				background-image: url(https://gudian-gddl.oss-cn-beijing.aliyuncs.com/layui/dpinfo/1.png);
				background-repeat: no-repeat;
				background-size:100% 100%;
				height: 380px;
			}
			.box2{
				background-image: url(https://gudian-gddl.oss-cn-beijing.aliyuncs.com/layui/dpinfo/2.png);
				background-repeat: no-repeat;
				background-size:100% 100%;
				height: 300px;
			}
			.box3{
				background-image: url(https://gudian-gddl.oss-cn-beijing.aliyuncs.com/layui/dpinfo/3.png);
				background-size:100% 100%;
				background-repeat: no-repeat;
				height: 380px;
			}
			.layui-btn {
			    background-color: transparent;
				color: #0087FF!important;
				font-size: 15px;
			}
			.box1,.box3{
				padding: 80px 40px 0px 40px;
			}
			.box2{
				padding: 180px 40px 0px 40px;
			}
			.layui-body {
			    position: absolute;
			    /* left: 200px; */
				left: 0;
			    right: 0;
			    top: 0;
			    bottom: 0;
			    z-index: 998;
			    width: auto;
			    overflow-y: auto;
			    box-sizing: border-box;
				padding: 0 20px;
			}
			.layui-form-select dl dd.layui-this {
			    background-color: #00B4FF;
			    color: #fff;
			}
			.layui-input, .layui-select, .layui-textarea {
			    /* width: 143px; */
			}
		</style>

	</head>

	<body>
		<div class="layui-body">
			<div class="layui-fluid">
				<div class="layui-row layui-col-space15">
					<div class="layui-col-md12">
						<div class="layui-card">
							<!-- <div class="layui-card-body">老干部数据大屏</div> -->
						</div>
					</div>
					<!--left map start-->
					<div class="layui-col-md7">
						<div class="layui-row layui-col-space15">
							<div class="layui-col-md24">
								<div class="layui-card">
									<!-- <div class="layui-card-header">地图</div> -->
									<div>
										<div id="container" class="layui-carousel" style="width: 100%; height: 730px;"> </div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!--left map end-->

					<!--right table start-->
					<div class="layui-col-md5">

						<!-- right huodong info start-->
						<div class="layui-card">
							<div class="layui-card-body box1">
								<div class="layui-form toolbar">
									<div class="layui-form-item">
										<div class="layui-inline">
											<select id="areaSelect" name="areaSelect" lay-filter="areaSelectFilter">

											</select>
										</div>
										<div class="layui-inline">
											<select id="jdSelect" name="jdSelect" lay-filter="jdSelectFilter">

											</select>
										</div>
										<div class="layui-inline">
											<button id="btnSearch" class="layui-btn layui-btn-sm layui-btn-radius">检查搜索 </button>
										</div>
									</div>
								</div>
								<table id="huodongTable" class="layui-table" lay-filter="huodongTable"></table>
							</div>
						</div>

						<!-- right huodong info end-->

						<div class="layui-card" style="padding-top: 20px;">
							<div class="layui-card-body box2">
								<div id="chart1" style="height: 200px;"></div>
							</div>
						</div>


						<div class="layui-card">
							<div class="layui-card-body box3">
								<div class="layui-form toolbar">
									<div class="layui-form-item">
										<div class="layui-inline">
											<select id="areaSelect2" name="areaSelect2" lay-filter="areaSelectFilter2">

											</select>
										</div>
										<div class="layui-inline">
											<select id="jdSelect2" name="jdSelect2" lay-filter="jdSelectFilter2">

											</select>
										</div>
										<div class="layui-inline">
											<button id="btnSearch2" class="layui-btn layui-btn-sm layui-btn-radius">检查搜索 </button>
										</div>
									</div>
								</div>
								<table id="huodongTable2" class="layui-table" lay-filter="huodongTable2"></table>
							</div>
						</div>

					</div>
					<!--right table end-->

					<div>
						<div>
						</div>
						<!--基础函数开发-->
						<script>
                            //表格
                            layui.use(['table', 'form'], function() {
                                var $ = layui.$;
                                var hdtable = layui.table;
                                var hdtable2 = layui.table;
                                var form = layui.form;
                                var form2 = layui.form;
                                var HuoDong = {
                                    tableId: "huodongTable"
                                };

                                var HuoDong2 = {
                                    tableId: "huodongTable2"
                                };

                                //渲染表格
                                var tableResult = hdtable.render({
                                    elem: '#' + HuoDong.tableId,
                                    url: 'http://124.128.226.225:8083/blade-app/huodong/getHuodongPageByAreaInfo',
                                    page: false,
                                    height: 300,
                                    cellMinWidth: 100,
                                    cols: [
                                        [{
                                            field: 'id',
                                            // hide: true,
                                            title: '主键'
                                        },
                                            {
                                                field: 'hdname',
                                                title: '活动名称',
                                                align: 'center'
                                            },
                                            {
                                                field: 'stime',
                                                title: '时间',
                                                align: 'center'
                                            },
                                            {
                                                field: 'areaname',
                                                title: '区域',
                                                align: 'center'
                                            },
                                            {
                                                field: 'manager',
                                                title: '发起人',
                                                align: 'center'
                                            },
                                        ]
                                    ]
                                });
                                //渲染表格
                                var tableResult2 = hdtable2.render({
                                    elem: '#' + HuoDong2.tableId,
                                    url: 'http://124.128.226.225:8083/blade-system/dept/getDeptPageByAreaInfo',
                                    page: false,
                                    height: 300,
                                    cellMinWidth: 100,
                                    cols: [
                                        [{
                                            field: 'id',
                                            // hide: true,
                                            title: '主键'
                                        },
                                            {
                                                field: 'deptName',
                                                title: '服务队名称',
                                                align: 'center'
                                            },
                                            {
                                                field: 'temascount',
                                                title: '团队数量',
                                                align: 'center'
                                            },
                                            {
                                                field: 'areaname',
                                                title: '活动区域',
                                                align: 'center'
                                            },
                                        ]
                                    ]
                                });
                                HuoDong.search = function() {
                                    var queryData = {};
                                    queryData['areacode'] = $("#areaSelect").val();
                                    queryData['jdcode'] = $("#jdSelect").val();
                                    hdtable.reload(HuoDong.tableId, { where: queryData });
                                };
                                HuoDong2.search = function() {
                                    var queryData = {};
                                    queryData['areacode'] = $("#areaSelect2").val();
                                    queryData['jdcode'] = $("#jdSelect2").val();
                                    hdtable2.reload(HuoDong2.tableId, { where: queryData });
                                };


                                $(function() {
                                    $.ajax({
                                        url: "http://124.128.226.225:8083/blade-system/region/getAreaByJn",
                                        // data:{'id':id},
                                        type: "get",
                                        dataType: "json",
                                        success: function(res) {
                                            // alert(JSON.stringify(res));
                                            var result = res.data;
                                            var shtml = "<option value=''>请选择区域</option>";
                                            $.each(result, function(i, val) {
                                                shtml += '<option value="' + val.code + '">' + val.name + '</option>';
                                            });
                                            $("#areaSelect").html(shtml);
                                            $("#areaSelect2").html(shtml);
                                            form.render('select');
                                        },
                                        error: function(data) {
                                            //$.messager.alert('错误', data.msg);
                                        }
                                    });
                                    HuoDong.search();
                                    HuoDong2.search();
                                    ///

                                    $.ajax({
                                        url: "http://124.128.226.225:8083/blade-user/geUserAgeTypeByAreaInfo",
                                        type: "get",
                                        dataType: "json",
                                        success: function(res) {
                                            var visdata = res.data;
                                            var option = {
                                                title: '',
                                                series: [{ name: '', type: 'pie', radius: '80%', data:  visdata, }]
                                            };
                                            var myChart = echarts.init(document.getElementById('chart1'));
                                            myChart.setOption(option);
                                        },
                                        error: function(res) {
                                            ////$.messager.alert('错误', res.msg);
                                        }
                                    });



                                    //init bd map container
                                    var map = new BMap.Map("container", { minZoom: 12 ,enableMapClick:false});
                                    var point = new BMap.Point(117.010213, 36.635747);
                                    //init bd map level
                                    map.centerAndZoom(point, 9);
                                    //set map isnot scroll.
                                    map.enableScrollWheelZoom(true);


                                    map.setMapStyle({style:'light'});

                                    $.ajax({
                                        url: "http://124.128.226.225:8083//blade-app/huodong/getHuodongJwdByAreaInfo",
                                        type: "get",
                                        dataType: "json",
                                        success: function(res) {
                                            $.each(res, function(i, val) {
                                                var point = new BMap.Point(val.lng,val.lat);
                                                var marker = new BMap.Marker(point);
                                                marker.addEventListener("click", function(e) {
                                                    var opts = {
                                                        width: 230, // 信息窗口宽度
                                                        height: 150 // 信息窗口高度
                                                    }
                                                    var sContent =
                                                        "<div>"+
                                                        "<h4>活动名称:"+val.hdname+"</h4>" +
                                                        "<h4>地址:"+val.address+"</h4>"+
                                                        "<h4>负责人:"+val.manager+"</h4>"+
                                                        "<h4>电话:"+val.phone+"</h4>"+
                                                        "</div>";
                                                    var infoWindow = new BMap.InfoWindow(sContent, opts);
                                                    map.openInfoWindow(infoWindow, point);
                                                });
                                                map.addOverlay(marker);
                                            });


                                        },
                                        error: function(res) {
                                           // //$.messager.alert('错误', res.msg);
                                        }
                                    });

                                })

                                //根据客户经理select  为"所属客户营销单元select"赋值
                                form.on('select(areaSelectFilter)', function (data) {
                                    // alert(data.value);
                                    $.ajax({
                                        url: "http://124.128.226.225:8083/blade-system/region/getStreetByArea?code="+data.value,
                                        // data:{'id':id},
                                        type: "get",
                                        dataType: "json",
                                        success: function(res) {
                                            var result = res.data;
                                            var shtml = "<option value=''>请选择街道</option>";
                                            $.each(result, function(i, val) {
                                                shtml += '<option value="' + val.code + '">' + val.name + '</option>';
                                            });
                                            $("#jdSelect").html(shtml);
                                            form.render('select');
                                        },
                                        error: function(data) {
                                           // $.messager.alert('错误', data.msg);
                                        }
                                    });
                                });
                                form2.on('select(areaSelectFilter2)', function (data) {
                                    // alert(data.value);
                                    $.ajax({
                                        url: "http://124.128.226.225:8083/blade-system/region/getStreetByArea?code="+data.value,
                                        // data:{'id':id},
                                        type: "get",
                                        dataType: "json",
                                        success: function(res) {
                                            var result = res.data;
                                            var shtml = "<option value=''>请选择街道</option>";
                                            $.each(result, function(i, val) {
                                                shtml += '<option value="' + val.code + '">' + val.name + '</option>';
                                            });
                                            $("#jdSelect2").html(shtml);
                                            form.render('select');
                                        },
                                        error: function(data) {
                                           // $.messager.alert('错误', data.msg);
                                        }
                                    });
                                });
                                // 搜索按钮点击事件
                                $('#btnSearch').click(function() {
                                    HuoDong.search();
                                });
                                $('#btnSearch2').click(function() {
                                    HuoDong2.search();
                                });




                            });
						</script>

					</div>
				</div>
			</div>
		</div>
	</body>
</html>
